<template>
	<a-modal :visible="bomIndexVisible" :maskClosable="false" :width="1400" @cancel="cancel" @ok="handleModalOK">
		<a-card :bordered="false">
			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">

						<a-col :md="8" :sm="24">
							<a-form-item label="BOM名称">
								<a-input v-model="queryParam.bomName" placeholder="请输入BOM名称" />
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="24">
							<a-form-item label="分类">
								<a-select placeholder="请选择" v-model="queryParam.bomClass" allowClear>
									<a-select-option :value="value" v-for="({ value, label }, index) in bomClassArray" :key="index">
										{{ label }}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>

						<a-col :md="8" :sm="24" v-show="showAllTypeBom">
							<!-- <a-form-item label="BOM类型">
                <a-select v-model="queryParam.bomType" placeholder="请输入BOM类型">
                  <a-select-option :value="item.id" v-for="(item, index) in $businessEnum.BOM_TYPE_ENUM">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item> -->
							<a-form-item label="BOM类型">
								<div>
									<a-radio-group v-model="queryParam.bomType" button-style="solid">
										<a-radio-button :value="item.id" v-for="(item, index) in $businessEnum.BOM_TYPE_ENUM" :key="index">
											{{ item.name }}
										</a-radio-button>
									</a-radio-group>
									<!-- {{queryParam.materialType}} -->
								</div>
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="24" v-show="showAllTypeBom">
							<a-form-item label="状态">
								<a-radio-group button-style="solid" v-model="queryParam.isDisable">
									<a-radio-button :value="''">
										全部
									</a-radio-button>
									<a-radio-button v-for="item in [{ label: '正常', value: 1 }, { label: '停用', value: 2 }]"
										:key="item.value" :value="item.value">
										{{
											item.label
										}}
									</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col :md="!advanced && 5 || 24" :sm="24">
							<span class="table-page-search-submitButtons"
								:style="advanced && { float: 'right', overflow: 'hidden' } || {}">
								<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
								<a-button style="margin-left: 8px"
									@click="() => { queryParam = { 'bomType': 1, isDisable: null }; $refs.table.refresh(true) }">重置</a-button>
							</span>
						</a-col>

					</a-row>
				</a-form>
			</div>

			<s-table ref="table" size="default" :scroll="{ y: 500 }" :columns="columns" :data="loadData" :alert="true"
				:rowKey="(record) => record.code"
				:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
				<!-- <span slot="image" slot-scope="text,record">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.imageUrl" />
				</span>
				<span slot="isDisable" slot-scope="text,record">
					<a-tag v-if="text == 1" color="#52C41A">正常</a-tag>
					<a-tag v-if="text == 2" color="#F52251">停用</a-tag>
				</span>

			</s-table>
		</a-card>
	</a-modal>
</template>

<script>
import { STable } from '@/components'
import { page, del } from '@/api/modular/main/emsbom/emsBomManage'
import { sysDictDataList } from '@/api/modular/main/emssysdictdata/emsDictDataManage'
import { DICT_TYPE_ID_FOR_BOM_CLASS } from '@/utils/util'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
	components: {
		STable
	},
	props: {
		ok: {
			type: Function
		},
		defaultBomType: {
			type: String,
			default: '1'
		},
		showAllTypeBom: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			bomIndexVisible: false,
			bomClassArray: [],
			advanced: false, // 高级搜索 展开/关闭
			queryParam: {
				isDisable: ''
			},  // 查询参数
			columns: [       // 表头
				{
					title: 'BOM编码',
					dataIndex: 'bomCode'
				},
				{
					title: '所属分类',
					dataIndex: 'bomClassName'
				},
				{
					title: '状态',
					dataIndex: 'isDisable',
					// customRender: (text, record, index) => record?.isDisable == 1 ? '正常' : '停用'
					scopedSlots: { customRender: 'isDisable' },
				},
				{
					title: 'BOM名称',
					dataIndex: 'bomName'
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' },
					// customRender: (text, record, index) => this.$util.createFcImage(this.$createElement, text)
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					return res.data
				})
			},
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			}
		}
	},

	methods: {
		show() {
			this.getBomClass()
			this.bomIndexVisible = true
			this.queryParam = {
				bomType: 1,
				isDisable: '',
			}
			this.queryParam.isDisable = '';
			// this.$set(this.queryParam, 'bomType', this.defaultBomType)
			setTimeout(() => {
				this.$refs.table.clearSelected()
				this.handleOk()
			}, 100)
		},
		getBomClass() {
			sysDictDataList({ typeId: DICT_TYPE_ID_FOR_BOM_CLASS, pageSize: 999 }).then((res) => {
				let dictDataList = res.data
				let bomClassArray = dictDataList.map((dictData) => {
					return {
						value: dictData.id,
						label: dictData.value
					}
				})
				this.bomClassArray = bomClassArray
			})
		},
		toggleAdvanced() {
			this.advanced = !this.advanced
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
		preview(url) {
			this.previewVisible = true
			this.previewImage = url
		},
		cancel() {
			this.bomIndexVisible = false
		},
		handleModalOK() {
			console.log('选中行数据', this.selectedRows)
			let list = this.selectedRows.filter(row => row.isDisable == 2);

			if (this.selectedRows.length == 0) {
				this.$message.error('没有选择BOM')
				return
			}
			if (this.selectedRows.length > 1) {
				this.$message.error('暂不支持多选BOM添加')
				return
			}
			if (list.length > 0) {
				this.$message.error('停用的BOM不能选择')
				return
			}
			// return
			this.bomIndexVisible = false
			this.$emit('ok', this.selectedRows)
			if (this.ok) {
				this.ok(this.selectedRows)
			}
		}
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}

.table-image {
	cursor: pointer;
	max-width: 100px;
	max-height: 50px;
	border: solid 1px #cccccc;
}
</style>
